<template>
  <view class="page">
    <view class="con-1">
      <u-steps :current="activeStep" activeColor="#FFB850" inactiveColor="#FFD28E">
        <u-steps-item :title="item.name" v-for="item in steps" :key=item.name></u-steps-item>
      </u-steps>
    </view>
    <block v-if="type === 'save' && activeStep == 0" style="margin-top: 20rpx;">
      <view class="con-box" style="margin-top: 20rpx;">
        <view class="box">
          <view class="title">填写主办方信息</view>
          <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="1"
            width="350" height="350">
            <div class="upload">
              <image src="https://www.atuanjian.com/appletStatic/static/images/my/u-15.png" mode=""></image>添加公司logo
              <view class="tip">建议尺寸为240*240像素</view>
            </div>
          </u-upload>
        </view>
        <view class="flex">
          <view class="flex-title"><span>*</span>主办方名称 </view><input type="text" placeholder="请输入主办方名称" maxlength="20"
            v-model="sponsorForm.name" />
        </view>
        <view class="flex">
          <view class="flex-title"><span>*</span>联系电话</view> <input type="number" placeholder="请输入电话" maxlength="11"
            v-model="sponsorForm.phone" />
        </view>
        <view class="flex" style="border: none;">
          <view class="flex-title"><span>*</span>主办方简介
          </view>
        </view><u-textarea placeholder="请输入内容" maxlength='255' count="255" fontSize="14px"
          v-model="sponsorForm.introduction"></u-textarea>
      </view>
    </block>
    <block v-else-if="type === 'next' && activeStep == 0" style="margin-top: 20rpx;">
      <view class="con-box" style="margin-top: 20rpx;" v-for="(item, index) in sponsorList" :key="item.id">
        <view class="box-1">
          <image :src="showImgApi+item.logo" mode="" />
          <view class="box-right">
            {{ item.name }}
            <view class="box-nei"><span>主办单位</span>{{ item.phone }}</view>
          </view>
        </view>
        <view class="xian"></view>
        <view class="con-text">
          <u-read-more showHeight="62" :toggle="true" color="#FFB850" ref="uReadMore">
            {{ item.introduction }}
          </u-read-more>
        </view>
        <view class="xian"></view>
        <view class="box-flex">
          <view class="box-flex-edit" @click="handleEdit(index, item)">编辑</view>
          <view class="box-flex-edit" @click="handleXuan(index)">
            <image :src="item.checked ? xuan_1 : xuan" mode="scaleToFill" />选择
          </view>
        </view>
      </view>
      <view class="add" @click="type = 'save'">
        <view class="add-icon">+</view>
        添加主办方
      </view>
    </block>
    <block v-else-if="activeStep == 1">
      <view class="con-box" style="margin-top: 20rpx;">
        <view class="box">
          <view class="title">填写活动概况信息</view>
          <u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" multiple :maxCount="1"
            width="350" height="437">
            <div class="upload">
              <image src="https://www.atuanjian.com/appletStatic/static/images/my/u-15.png" mode=""></image>添加活动海报
              <view class="tip">建议尺寸为350*450像素</view>
            </div>
          </u-upload>
        </view>
        <view class="flex">
          <view class="flex-title"><span>*</span>活动主题</view> <input type="text" placeholder="请输入活动主题"
            v-model="form.theme" />
        </view>
        <view class="flex">
          <view class="flex-title"><span>*</span>活动形式 </view><u-radio-group v-model="form.activity_format"
            placement="row" size="14">
            <u-radio activeColor="#FFB850" v-for="(item, index) in radiolist1" :key="index" :label="item.name"
              :name="item.id"></u-radio>
          </u-radio-group>
        </view>
        <view class="flex" v-if="form.activity_format === 2" @click="tapArea">
          <view class="flex-title"><span>*</span>省市区</view> <input type="number" placeholder="请选择" disabled
            v-model="region" />
        </view>
        <view class="flex" v-if="form.activity_format === 2">
          <view class="flex-title"><span>*</span>详细地址</view> <input type="text" placeholder="请输入"
            v-model="form.address" />
        </view>
        <view class="flex" @click="handleTime('start')">
          <view class="flex-title"><span>*</span>开始时间</view> <input type="number" placeholder="请选择" disabled
            v-model="form.start_date" />
        </view>
        <view class="flex" @click="handleTime('end')">
          <view class="flex-title"><span>*</span>结束时间</view> <input type="number" placeholder="请选择" disabled
            v-model="form.end_date" />
        </view>
        <view class="flex">
          <view class="flex-title"><span>*</span>限制人数</view> <input type="number" placeholder="请输入"
            v-model="form.max_number_people" />
        </view>
      </view>
    </block>
    <block v-else-if="activeStep == 2">
      <view class="con-box" style="margin-top: 20rpx;">
        <view class="box">
          <view class="title">填写活动详情信息</view>
        </view>
        <sp-editor editorId="editor" :toolbar-config="toolbarConfig" :readOnly="readOnly" @input="inputOver"
          @upinImage="upinImage" @upinVideo="upinVideo" @init="initEditor" @overMax="overMax"
          @addLink="addLink"></sp-editor>
      </view>
      <view class="con-box" style="margin-top: 20rpx;">
        <view class="box">
          <view class="title">填写活动须知</view>
        </view>
        <u-textarea v-model="form.notice" placeholder="请输入内容" showConfirmBar adjustPosition></u-textarea>
      </view>
    </block>
    <block v-else>
      <view class="con-box" style="margin-top: 20rpx;">
        <view class="box">
          <view class="title">报名设置</view>
        </view>
        <view class="flex" @click="handleNav('/pagesB/active/TickeSetting?id=' + activity_id)">
          <view class="flex-title"><span>*</span>活动费用</view>
          <input type="text" placeholder="请选择>" disabled :value="setTicket" />
        </view>
        <view class="flex" @click="handleNav('/pagesB/active/signUpSet?id=' + activity_id)">
          <view class="flex-title"><span>*</span>活动报名设置
          </view> <input type="text" placeholder="请选择>" disabled :value="setEnroll" />
        </view>
      </view>
    </block>
    <view class="kong"></view>
    <view class="bottom-flex">
      <view class="btn-save" @click="handleSave" v-if="type === 'save' && activeStep == 0">保存</view>
      <view class="btn-save" @click="handleNext" v-else-if="type === 'next' && activeStep == 0">下一步</view>
      <block v-else-if="activeStep == 1 || activeStep == 2 || activeStep == 3">
        <view class="btn-save previous" @click="handleReduce" style="margin-right: 30rpx;">上一步</view>
        <view class="btn-save previous" @click="handleAdd">下一步</view>
      </block>
    </view>
    <u-modal :show="show" title="温馨提示" @confirm="confirm">
      <view class="slot-content">
        <rich-text :nodes="content"></rich-text>
      </view>
    </u-modal>
    <u-datetime-picker :show="showTime" v-model="dayTime" mode="datetime" @confirm="handleConfirmTime"
      @cancel="showTime = false"></u-datetime-picker>
    <lotus-address v-on:choseVal="choseValue" :lotusAddressData="lotusAddressData"
      v-if="lotusAddressData.visible"></lotus-address>
  </view>
</template>

<script>
import lotusAddress from "../components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue";
import {
  convertImgStylesToAttributes,
  handleHtmlWithVideo,
} from "@/uni_modules/sp-editor/utils";
import {
  getSponsorList,
  submitSponsor,
  submitActivity,
} from "@/utils/request.js";
import helper from "@/utils/helper.js";
export default {
  data() {
    return {
      editorIns: null,
      readOnly: false,
      xuan: "https://www.atuanjian.com/appletStatic/static/images/u-18.png",
      xuan_1: "https://www.atuanjian.com/appletStatic/static/images/u-19.png",
      fileList2: [],
      dayTime: helper.formatTime(new Date()),
      toolbarConfig: {
        // excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck'],
        iconSize: "20px",
        iconColumns: 10,
      },
      mediaQueryOb: null, // 响应式媒体查询
      show: false,
      form: {
        token: uni.getStorageSync("token"),
        activity_format: 1,
        details: "",
      },
      showTime: false,
      activity_id: '',
      setTicket: '请选择',
      setEnroll: '请选择',
      activeStep: uni.getStorageSync("activeStep") || 0,
      radiolist1: [
        {
          name: "线上活动",
          disabled: true,
          id: 1,
        },
        {
          name: "线下活动",
          disabled: false,
          id: 2,
        },
      ],
      lotusAddressData: {
        visible: false,
        provinceName: "",
        cityName: "",
        townName: "",
      },
      type: "save",
      sponsorForm: {
        name: "",
        phone: "",
        introduction: "",
        token: uni.getStorageSync("token"),
      },
      content_1:
        "蚂蚁团建,一站式团建采购平台,秉承“快乐团建 轻松采购”的服务理念,为企业客户提供活动策划和落地执行服务,让团建采购从此省心省力, 让团建组织变得轻松容易！蚂蚁团建作为企业体育活动策划专家，以体验式培训技术为依托，为成长型企业提供管理技术整体解决方案。结合互联网技术，以提供一站式团建产品，团建场地，团建服务解决方案，实现企业与员工双赢的局面。",
      steps: [
        {
          name: "主办方",
          desc: "填写基本信息",
        },
        {
          name: "活动概况",
          desc: "上传证件照片",
        },
        {
          name: "活动详情",
          desc: "提交审核",
        },
        {
          name: "报名设置",
          desc: "提交审核",
        },
      ],
      p: 0,
      sponsorList: [],
      count: 0,
      content:
        '<div>1.蚂蚁团建平台提供免费信息发布服务辅助功能。</div><div style="margin-top:20px;">2.活动主办方需申请提现费用，需承担腾讯微信官网提现的千分之六手续费、蚂蚁团建平台需给用户开具发票， 将收取3.0 % 税费。 </div><div style="margin-top:20px;>3.活动主办方需给蚂蚁团建平台开具发票。 </div><div style="margin-top:20px;>4.用户如需开具发票请在官网上土提交开票信息和邮箱地址，蚂蚁团建只提供电子普通发票。蚂蚁团建开具发票后会发送至邮箱内。</div><div style="margin-top:20px;>主：如有疑问请联系平台客服</div><div style="margin-top:20px;>小周：15466997800（微信同上）</div>',
      fileList1: [],
      typeTime: "",
      region: "",
      active: {},
      showImgApi:this.$config.showImgApi
    };
  },
  mounted() {
    this.testMediaQueryObserver();
  },
  onShow() {
    if (uni.getStorageSync('setTicket')) {
      this.setTicket = '已设置'
    }
    if (uni.getStorageSync('setTicket')) {
      this.setEnroll = '已设置'
    }
  },
  destroyed() {
    this.mediaQueryOb.disconnect(); //组件销毁时停止媒体查询监听
    this.mediaQueryOb = null;
    console.log("==== destroyed :");
  },
  components: {
    lotusAddress,
  },
  onLoad() {
    if (!uni.getStorageSync("userInfo")) {
      uni.showToast({
        title: "请先登陆！",
        icon: "none",
        mask: true,
      });
      setTimeout(() => {
        uni.navigateTo({
          url: "/pagesB/login/login",
        });
      }, 1500);
      return;
    }
    this.getList();
  },
  methods: {
    async getSponsorList(data) {
      return await getSponsorList(data);
    },
    async submitActivity(data) {
      return await submitActivity(data);
    },
    async submitSponsor(data) {
      return await submitSponsor(data);
    },
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
    },
    async afterRead(event) {
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`fileList${event.name}`][fileListLen];
        this.$set(
          this[`fileList${event.name}`],
          fileListLen,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let that = this;
        let a = uni.uploadFile({
          url: that.$config.upLoadApi + "file/imageUpload",
          filePath: url,
          name: "file",
          formData: {
            file: url,
            token: uni.getStorageSync("token"),
          },
          success: (res) => {
            var data = JSON.parse(res.data);
            uni.hideLoading();
            if (data.code == 200) {
              const result =data.path;
              resolve(result);
            } else {
              reject(new Error("上传失败")); // 拒绝 Promise
            }
          },
          fail: (err) => {
            console.error(err);
            uni.hideLoading();
            reject(err); // 拒绝 Promise
          },
        });
      });
    },
    getList() {
      const data = {
        token: uni.getStorageSync("token"),
        p: this.p,
        n: 8,
      };
      this.getSponsorList(data).then((res) => {
        this.count = res.count;
        let sponsorList = [...res.list, ...this.sponsorList];
        sponsorList.forEach((item) => {
          item.checked = false;
        });
        this.sponsorList = sponsorList;
        if (this.sponsorList.length > 0 && this.activeStep == 0) {
          this.type = "next";
        }
      });
    },
    load() {
      this.$refs.uReadMore.init();
    },
    handleTime(type) {
      this.typeTime = type;
      this.showTime = true;
    },
    handleConfirmTime(e) {
      const type = typeof e.value;
      let selectedDate = "";
      if (type === "string") {
        selectedDate = e.value;
      } else {
        selectedDate = helper.timestampToDateString(e.value);
      }

      if (this.typeTime === "start") {
        if (new Date(selectedDate) > new Date(this.form.endTime)) {
          uni.showToast({
            title: "开始时间不能大于结束时间",
            icon: "none",
          });
          return;
        }
        this.form.start_date = helper.formatDate(e.value);
      } else {
        if (new Date(selectedDate) < new Date(this.form.startTime)) {
          uni.showToast({
            title: "结束时间不能小于开始时间",
            icon: "none",
          });
          return;
        }
        this.form.end_date = helper.formatDate(e.value);
      }
      this.showTime = false;
    },
    handleSave() {
      if (
        !this.sponsorForm.name ||
        !this.sponsorForm.phone ||
        !this.sponsorForm.introduction ||
        this.fileList1.length == 0
      ) {
        uni.showToast({
          title: "请输入完整信息",
          icon: "none",
        });
      }
      const data = {
        ...this.sponsorForm,
        logo: this.fileList1[0].url,
      };
      this.submitSponsor(data).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.sponsorForm = { token: uni.getStorageSync("token") };
          this.type = "next";
          this.p = 0;
          this.sponsorList = [];
          this.getList();
        }
      });
    },
    handleXuan(index) {
      this.sponsorList.forEach((item) => {
        item.checked = false;
      });
      this.sponsorList[index].checked = true;
      this.form.activity_sponsor_id = this.sponsorList[index].id;
    },
    handleEdit(index, item) {
      this.sponsorForm = { ...item, token: uni.getStorageSync("token") };
      this.type = "save";
      this.fileList1 = [{ url: item.logo, status: "success", message: "" }];
    },
    handleNext() {
      if (!this.form.activity_sponsor_id) {
        uni.showToast({
          title: "请选择主办方",
          icon: "none",
        });
        return;
      }
      this.activeStep = 1;
    },
    tapArea() {
      this.lotusAddressData.visible = true;
    },
    handleNav(url) {
      uni.navigateTo({
        url: url,
      });
    },
    /**
     * 媒体查询 - 响应式处理一些东西
     */
    testMediaQueryObserver() {
      this.mediaQueryOb = uni.createMediaQueryObserver(this);
      this.mediaQueryOb.observe(
        {
          minWidth: 0, //页面最小宽度 0px
          maxWidth: 500, //页面宽度最大 500px
        },
        (matches) => {
          console.log("==== 开启媒体查询 :", matches);
          if (matches) {
            // 页面宽度在0-500px时
            this.toolbarConfig.iconColumns = 12;
          } else {
            this.toolbarConfig.iconColumns = 16;
          }
        }
      );
    },
    /**
     * 获取输入内容
     * @param {Object} e {html,text} 内容的html文本，和text文本
     */
    inputOver(e) {
      console.log("==== inputOver :", e);
      this.form.details = e.html;
    },
    /**
     * 超出最大内容限制
     * @param {Object} e {html,text} 内容的html文本，和text文本
     */
    overMax(e) {
      console.log("==== overMax :", e);
    },
    /**
     * 编辑器就绪
     * @param {Object} editor 编辑器实例，你可以自定义调用editor实例的方法
     * @tutorial editor组件 https://uniapp.dcloud.net.cn/component/editor.html#editor-%E7%BB%84%E4%BB%B6
     * @tutorial 相关api https://uniapp.dcloud.net.cn/api/media/editor-context.html
     */
    initEditor(editor) {
      this.editorIns = editor; // 保存编辑器实例
      this.preRender();
    },
    preRender() {
      // 初始化编辑器内容
      uni.showLoading({
        title: "数据加载中...",
      });
      setTimeout(() => {
        // const htmlContent = `<div><strong>猫猫</strong> <a href="http://www.baidu.com">百度</a>\n<img style="width:100px;height:50px;" src="https://img.yzcdn.cn/vant/cat.jpeg"  />\n<i>yaho</i> giao\n<img width="200px" src="https://img.yzcdn.cn/vant/cat.jpeg"/></div>\n`;
        const htmlContent = this.form.details;
        const handleHtml = convertImgStylesToAttributes(htmlContent);
        console.log(handleHtml);
        this.editorIns.setContents({
          html: handleHtml,
        });
        uni.hideLoading();
      }, 1000);
      // setTimeout(() => {
      //   /**
      //    * 光标默认在第一个，所以默认会在最前面插入内容
      //    * 注意：
      //    * 由于官方editor组件在不同平台是基于各平台对应的富文本技术实现
      //    * 因此insertText方法可能存在在安卓app正常，但是其他平台在插入内容的时候会移动光标聚焦
      //    * 导致焦点回滚到视口处的问题，因此尽量避免初始化的时候使用insertText插入内容
      //    * 可使用setContents初始化内容代替，但是要注意的时，setContents会将所有内容整体初始化，而不是插入内容
      //    */
      //   this.editorIns.insertText({ text: 'Hello！' })
      // }, 1000)
    },
    /**
     * 直接运行示例工程插入图片无法正常显示的看这里
     * 因为插件默认采用云端存储图片的方式
     * 以$emit('upinImage', tempFiles, this.editorCtx)的方式回调
     * @param {Object} tempFiles
     * @param {Object} editorCtx
     */
    upinImage(tempFiles, editorCtx) {
      /**
       * 本地临时插入图片预览
       * 注意：这里仅是示例本地图片预览，因为需要将图片先上传到云端，再将图片插入到编辑器中
       * 正式开发时，还请将此处注释，并解开下面 使用 uniCloud.uploadFile 上传图片的示例方法 的注释
       * @tutorial https://uniapp.dcloud.net.cn/api/media/editor-context.html#editorcontext-insertimage
       */
      // #ifdef MP-WEIXIN
      // 注意微信小程序的图片路径是在tempFilePath字段中
      // editorCtx.insertImage({
      //   src: tempFiles[0].tempFilePath,
      //   width: "80%", // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
      //   success: function () {},
      // });
      // #endif

      // #ifndef MP-WEIXIN
      // editorCtx.insertImage({
      //   src: tempFiles[0].path,
      //   width: "80%", // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
      //   success: function () {},
      // });
      // #endif

      /**
       * 使用 uniCloud.uploadFile 上传图片的示例方法（可适用多选上传）
       * 正式开发环境中，请将上面 本地临时插入图片预览 注释后，模仿以下写法
       */
      tempFiles.forEach(async (item) => {
        uni.showLoading({
          title: "上传中请稍后",
          mask: true,
        });
        const that = this;
        let upfile = await new Promise((resolve, reject) => {
          uni.uploadFile({
            url: that.$config.upLoadApi + "file/imageUpload", // 接口地址
            filePath: item.tempFilePath,
            name: "file",
            formData: {
              file: item.tempFilePath,
              token: uni.getStorageSync("token"),
            },
            success: (res) => {
              resolve(res);
            },
            fail: (err) => {
              console.log("err:", err);
              reject(err);
            },
          });
        });
        const url = that.$config.showImgApi + JSON.parse(upfile.data).path;
        editorCtx.insertImage({
          src: url,
          width: "80%", // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
          success: function () {
            uni.hideLoading();
          },
        });
      });
    },
    async upinVideo(tempFilePath, editorCtx) {
      // 此处tempFilePath为本地视频临时地址，请对接后端接口将视频上传后，获取真实地址，再插入到编辑器中
      // 上传视频，并获取视频真实地址（其实和上面插入图片的步骤差不多）
      const videoUrl = tempFilePath;
      const that = this;
      let upfile = await new Promise((resolve, reject) => {
        uni.uploadFile({
          url: that.$config.upLoadApi + "file/imageUpload", // 接口地址
          filePath: videoUrl,
          name: "file",
          formData: {
            file: videoUrl,
            token: uni.getStorageSync("token"),
          },
          success: (res) => {
            resolve(res);
          },
          fail: (err) => {
            console.log("err:", err);
            reject(err);
          },
        });
      });
      console.log(upfile, "upfile");
      const url = that.$config.showImgApi + JSON.parse(upfile.data).path;
      console.log("url:", url);
      // 插入一张图片占位（uni-editor无法直接插入video标签，所以需要以图片占位）
      editorCtx.insertImage({
        src: "https://img.zcool.cn/community/01055859b8e37fa8012075341db67f.gif",
        width: "80%", // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
        alt: videoUrl, // 携带视频真实地址
        success: () => { },
      });
    },
    exportHtml(e) {
      // 若携带视频，需按需导入handleHtmlWithVideo方法处理富文本，再导出
      const temphtml = handleHtmlWithVideo(e);
      uni.navigateTo({
        url: "/pages/out/out",
        success(res) {
          res.eventChannel.emit("e-transmit-html", {
            data: temphtml,
          });
        },
      });
    },
    addLink(e) {
      console.log("==== addLink :", e);
    },
    handleReduce() {
      this.activeStep--;
      if (this.sponsorList.length > 0 && this.activeStep == 0) {
        this.type = "next";
      }
      uni.setStorageSync("activeStep", this.activeStep);
    },
    handleAdd() {
      console.log('handleAdd', this.activeStep)
      if (this.activeStep == 1) {
        if (
          !this.form.theme ||
          !this.form.start_date ||
          !this.form.end_date ||
          !this.form.max_number_people ||
          this.fileList2.length == 0
        ) {
          uni.showToast({
            title: "请输入完整信息！",
            icon: "none",
          });
          return;
        }
        if (
          this.form.activity_format == 2 &&
          (!this.form.province || !this.form.address)
        ) {
          uni.showToast({
            title: "请填写地址！",
            icon: "none",
          });
          return;
        }
        this.activeStep++;
        uni.setStorageSync("activeStep", this.activeStep);
      } else if (this.activeStep == 2) {
        if (!this.form.details) {
          uni.showToast({
            title: "请填写活动详情信息！",
            icon: "none",
          });
          return;
        }
        if (!this.form.notice) {
          uni.showToast({
            title: "请填写活动须知！",
            icon: "none",
          });
          return;
        }
        this.form.poster_img = this.fileList2[0].url
        this.submitActivity(this.form).then((res) => {
          console.log(res, "res");
          if (res) {
            this.activeStep++;
            this.activity_id = res.activity_id
            uni.setStorageSync("activeStep", this.activeStep);
          } else {
            return;
          }
        }).catch((err) => {
          return;
        })
      } else if (this.activeStep == 3) {
        console.log("111");
        // if (this.setTicket !== '已设置') {
        //   uni.showToast({
        //     title:'请选择活动费用',
        //     icon:'none'
        //   })
        //   return ;
        // }
        // if (this.setEnroll !== '已设置') {
        //   uni.showToast({
        //     title:'请选择活动报名设置',
        //     icon:'none'
        //   })
        //   return ;
        // }
        uni.navigateTo({
          url: "/pagesB/active/preview?id="+this.activity_id,
        });
      }
    },
    onEditorReady() {
      const _this = this;
      uni
        .createSelectorQuery()
        .select("#editor")
        .context((res) => {
          _this.editorCtx = res.context;
        })
        .exec();
    },
    choseValue(res) {
      //res数据源包括已选省市区与省市区code
      console.log(res);
      this.lotusAddressData.visible = res.visible; //visible为显示与关闭组件标识true显示false隐藏
      //res.isChose = 1省市区已选 res.isChose = 0;未选
      if (res.isChose) {
        this.lotusAddressData.provinceName = res.province; //省
        this.lotusAddressData.cityName = res.city; //市
        this.lotusAddressData.townName = res.town; //区
        this.region = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
        this.form.province = res.province;
        this.form.city = res.city;
        this.form.county = res.town;
      }
    },
    confirm() {
      this.show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx 0;

  .kong {
    height: 100rpx;
  }

  ::v-deep.u-radio-group--row {
    justify-content: flex-end;
  }

  ::v-deep.u-upload__wrap {
    justify-content: flex-end;
  }

  ::v-deep.u-upload__wrap__preview {
    margin: 0;

    image {
      width: 350rpx !important;
      height: 350rpx !important;
    }
  }

  .con-text {
    width: 90%;
    margin: 0 auto;
    padding: 20rpx 0;
    font-size: 24rpx;
  }

  .box-flex {
    width: 90%;
    margin: 16rpx auto 0;
    padding-bottom: 16rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .box-flex-edit {
      display: flex;
      align-items: center;
      height: 56rpx;
      border-radius: 62rpx;
      font-size: 24rpx;
      color: #f59a23;
      text-align: center;
      justify-content: flex-start;
      line-height: 56rpx;

      image {
        width: 32rpx;
        height: 32rpx;
        margin-right: 8rpx;
      }
    }
  }

  .bottom-flex {
    width: 100%;
    height: 105rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;

    .btn-save {
      width: 694rpx;
      height: 65rpx;
      background-color: #ffb850;
      border-radius: 62rpx;
      font-size: 25rpx;
      color: #ffffff;
      text-align: center;
      line-height: 65rpx;
    }

    .previous {
      width: 326rpx;
    }
  }
}

::v-deep.u-textarea {
  width: 92%;
  margin: 0rpx auto;
  padding-bottom: 26rpx;
  border: none;
  font-size: 25rpx !important;

  .u-textarea__field {
    font-size: 25rpx !important;
  }
}

.flex {
  width: 92%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f2f2f2;

  .flex-title {
    font-size: 25rpx;

    span {
      color: #d9001b;
    }
  }

  input {
    font-size: 25rpx;
    text-align: right;
  }
}

.add {
  margin: 20rpx auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25rpx;
  color: #ffb850;

  .add-icon {
    width: 40rpx;
    height: 40rpx;
    background-color: #ffb850;
    border-radius: 50%;
    font-size: 36rpx;
    text-align: center;
    line-height: 33rpx;
    color: #ffffff;
    margin-right: 10rpx;
  }
}

.con-box {
  width: 694rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  margin: 0 auto;

  .xian {
    width: 100%;
    height: 1rpx;
    background-color: #f2f2f2;
  }

  .box-1 {
    width: 90%;
    margin: 0 auto;
    padding: 40rpx 0 20rpx 0;
    display: flex;

    image {
      width: 97rpx;
      height: 97rpx;
      border-radius: 50%;
      background: #ccc;
    }

    .box-right {
      flex: 1;
      margin-left: 12rpx;
      font-size: 27rpx;

      .box-nei {
        font-size: 18rpx;
        margin-top: 20rpx;

        span {
          padding: 2rpx 6rpx;
          border-radius: 8rpx;
          border: 1rpx solid#FFB850;
          color: #ffb850;
          margin-right: 30rpx;
          font-size: 20rpx;
        }
      }
    }
  }

  .box {
    width: 633rpx;
    margin: 0 auto;
    padding: 24rpx 0;
    font-size: 28rpx;
  }

  ::v-deep.u-upload {
    margin: 12rpx auto 0;
    width: 350rpx;
    height: 350rpx;
    background-color: #ffe7ca;
    border-radius: 12rpx;
    margin-top: 30rpx;

    .upload {
      width: 350rpx;
      height: 350rpx;
      text-align: center;
      font-size: 25rpx;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;

      image {
        width: 138rpx;
        height: 118rpx;
      }

      .tip {
        margin-top: 8rpx;
        color: #797979;
      }
    }
  }
}

.con-1 {
  width: 694rpx;
  height: 140rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  margin: 0 auto;
}
</style>